<template>
    <view class="content">
        <div
            id="dplayer"
            style="height: 450px; width: 800rpx; background: #000;"
        ></div>
        <button @click="video()" class="video">播放</button>
        <button @click="this.$router.go(-1)" class="go">返回</button>
    </view>
</template>

<script>
//引入 hls与dplayer 用于解析播放视频
import Hls from 'hls.js'
import Dplayer from 'dplayer'
export default {
    data() {
        return {
            dp: {},
            video_url: ''
        }
    },
    mounted() {},
    created() {
        this.video_url = this.$route.query.data
        console.log('this.$route', this.$route) //打印结果为{user:'david'}
    },
    methods: {
        video() {
            this.video_url = this.$route.query.data
            console.log(this.$route.query.data) //打印结果为{user:'david'}
            this.dp = new Dplayer({
                //播放器的一些参数
                container: document.getElementById('dplayer'),
                autoplay: true, //是否自动播放
                theme: '#FADFA3', //主题色
                loop: true, //视频是否循环播放
                lang: 'zh-cn',
                screenshot: false, //是否开启截图
                hotkey: true, //是否开启热键
                preload: 'auto', //视频是否预加载
                volume: 0.7, //默认音量
                mutex: true, //阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
                video: {
                    url: this.video_url, //视频地址
                    // url: 'http://boliu.hbzcyc.com/474975DDEFA/474975DDEFA.m3u8', //视频地址
                    type: 'customHls',
                    customType: {
                        customHls: function (video) {
                            const hls = new Hls() //实例化Hls  用于解析m3u8
                            hls.loadSource(video.src)
                            hls.attachMedia(video)
                        }
                    }
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
button {
    font-size: 16px;
}
.video {
    margin: 20px;
    margin-left: 45%;
    color: #1e4368;
    text-shadow: 1px 1px 1px #fff;
    border: 1px solid #dce1e6;
    box-shadow: 0 1px 2px #fff inset, 0 -1px 0 #a8abae inset;
    background: -webkit-linear-gradient(top, #f2f3f7, #e4e8ec);
    background: -moz-linear-gradient(top, #f2f3f7, #e4e8ec);
    background: linear-gradient(top, #f2f3f7, #e4e8ec);
}
.go {
    color: #01060f;
    text-shadow: 1px 1px 1px #fff;
    border: 1px solid #dce1e6;
    box-shadow: 0 1px 2px #fff inset, 0 -1px 0 #a8abae inset;
    background: -webkit-linear-gradient(top, #f2f3f7, #e4e8ec);
    background: -moz-linear-gradient(top, #f2f3f7, #e4e8ec);
    background: linear-gradient(top, #f2f3f7, #e4e8ec);
}
</style>
